<template>
  <!-- 列表 -->
  <ContentWrap>
    <div style="padding-bottom: 20px; border-bottom: 1px dashed #f8f8f9">
      <el-button :icon="Plus" @click="addTag">添加分组</el-button>
      <!-- <el-button type="primary" :icon="Plus" @click="addCustom">添加客服</el-button> -->
      <el-button type="warning" :icon="Plus" @click="deploy(null)">部署客服</el-button>
      <el-button type="success" :icon="GoodsFilled" @click="onPayment('service-account')"
        >购买客服</el-button
      >
    </div>
    <el-table v-loading="loading" :data="lists" border>
      <!-- <el-table-column label="客服头像" align="center" prop="avator">
        <template #default="scope">
          <el-image
            :src="scope.row.avator"
            fit="cover"
            @click="showImg(scope.row.avator)"
            style="width: 40px; height: 40px"
          ></el-image>
        </template>
      </el-table-column> -->
      <el-table-column label="客服名称" align="left" prop="name" min-width="200px">
        <template #default="scope">
          <div class="w-200px flex items-center justify-left">
            <el-image
              :src="scope.row.avator"
              fit="fill"
              @click="showImg(scope.row.avator)"
              style="width: 50px; height: 50px; border-radius: 50%; border: 3px solid #aecaeb"
            ></el-image>
            <el-link type="primary" @click="wentWork(scope.$index)" class="ml-10px">{{
              scope.row.name
            }}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="客服分组" align="left" prop="groupId">
        <template #default="scope">
          {{ showLeftSidesName(scope.row.groupId) }}
        </template>
      </el-table-column>
      <el-table-column label="所属员工" align="left" prop="ownerUserId">
        <template #default="scope">
          {{ showOwnerName(scope.row.ownerUserId) }}
        </template>
      </el-table-column>
      <el-table-column label="欢迎语" align="left" prop="welcomeName" />
      <el-table-column label="场景配置" align="left" prop="sceneName" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <el-tag type="info" v-if="scope.row.status == 0">未启用</el-tag>
          <el-tag type="success" v-if="scope.row.status == 1">已启用</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 9">已过期</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="有效期" align="center" prop="expireTime">
        <template #default="scope">
          <span v-if="scope.row.expireTime == 0">永久</span>
          <span v-else>{{ scope.row.expireTime }}天</span>
        </template>
      </el-table-column>
      <el-table-column label="有效期至" align="center" prop="expireAt" width="200px">
        <template #default="scope">
          <span v-if="scope.row.expireAt == null">永久</span>
          <span v-if="scope.row.expireAt">{{ formatDate(scope.row.expireAt) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" prop="creatorName" width="160">
        <template #default="scope">
          <el-button
            type="success"
            :disabled="scope.row.expireTime == 0"
            link
            @click="onRenew('service-account', scope.row.id)"
            >续费</el-button
          >
          <el-button type="primary" link @click="editForm(scope.row, scope.$index)">编辑</el-button>
          <el-button type="warning" link @click="deploy(scope.row)">部署</el-button>

          <!-- <el-divider direction="vertical" /> -->
          <!-- <el-button size="small" link type="primary" @click="wentWork(scope.$index)"
            >获取代码</el-button
          > -->
          <!-- <el-button link type="danger" @click="delForm(scope.row, scope.$index)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="totals"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <Dialog v-model="dialogVisible" title="图片预览">
    <el-image :src="imageUrl"></el-image>
  </Dialog>
  <!-- 购买套餐规格列表 -->
  <SkuFormDialog ref="skuFormDialog" />

  <!-- 续费弹窗 -->
  <RenewPackageDialog ref="renewPackgeRef" />
</template>
<script setup lang="ts">
import RenewPackageDialog from '@/components/RenewPackageDialog/index.vue'
import SkuFormDialog from '@/components/SkuFormDialog/index.vue'
import { formatDate } from '@/utils/formatTime.ts'
import { Plus, GoodsFilled } from '@element-plus/icons-vue'
import * as Assistant from '@/api/service/assistant/index'

const props = defineProps({
  simpleOption: Array,
  ownerUserOption: Array,
  leftSides: Array,
  sceneOption: Array
})

const dialogVisible = ref(false)
const imageUrl = ref('')
const emit = defineEmits(['setChangeTag', 'showCoumer'])
const router = useRouter()

const loading = ref(false) // 列表的加载中
const totals = ref(0) // 列表的总页数
const lists = ref([
  {
    name: 1
  }
]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  groupId: ''
})
const showImg = (url) => {
  imageUrl.value = url
  dialogVisible.value = true
}
/*编辑客服*/
const editForm = (item) => {
  emit('showCoumer', 'update', item)
}
/*进入工作台*/
const wentWork = () => {
  router.push('workbench/index')
}
/* 添加标签 */
const addTag = () => {
  emit('setChangeTag', 'create')
}

/*添加客服*/
const addCustom = () => {
  emit('showCoumer', 'create')
}

const skuFormDialog = ref()
// 吊起支付方法
const onPayment = (code: string, type?: number = 2) => {
  skuFormDialog.value.open(type, code, null)
}
/*展示名称*/
const showOwnerName = (id) => {
  const result = props.ownerUserOption.find((item) => item.id === id)
  return result ? result.nickname : ''
}
/*展示分组*/
const showLeftSidesName = (id) => {
  const result = props.leftSides.find((item) => item.id === id)
  return result ? result.name : '全部'
}
/*展示场景*/
const showSceneName = (id) => {
  const result = props.sceneOption.find((item) => item.id === id)
  return result ? result.name : '全部'
}
/**/
/** 查询列表 */
const getList = async () => {
  loading.value = true
  const { list, total } = await Assistant.getAssistantPage(queryParams)
  lists.value = list
  // lists.value.push({
  //   "id": 22,
  //   "name": "23434545646",
  //   "token": "test1234",
  //   "groupId": 1,
  //   "avator": "http://192.168.0.76:48080/admin-api/infra/file/4/get/49871fe07f55fc70f238b12153b177065fc6dbce09b9cabb8cd3d6f443ac568f.jpg",
  //   "ownerUserId": 1,
  //   "welcomeId": 1,
  //   "status": 9,
  //   "createTime": null,
  //   "sceneId": 4,
  //   "welcomeName": "默认欢迎语",
  //   "sceneName": "1608场景",
  //   "introConfigId": 14,
  //   "introConfigName": "客服简介",
  //   "expireTime": 0,
  //   "expireAt": null
  // })
  totals.value = total
  loading.value = false
}

/*分组查询*/
const groupGetList = (val) => {
  queryParams.groupId = val
  getList()
}
/*删除*/
const delForm = (item) => {
  ElMessageBox.confirm('确定要删除当前客服吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const data = await Assistant.deleteAssistant(item.id)
      if (data) ElMessage.success('删除成功')
      emit('sideRresh')
    })
    .catch(() => {})
}

// 跳转到部署客服页面
const deploy = (row) => {
  if (row) {
    router.push({
      name: 'AssistantDeploy',
      query: {
        id: row.id
      }
    })
  } else {
    router.push({
      path: '/service/assistant/deploy'
    })
  }
}

const renewPackgeRef = ref()
// 吊起续费方法
const onRenew = (code: string, rowId) => {
  renewPackgeRef.value.open(code, rowId)
}

defineExpose({ groupGetList })
/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
